<template>
  <div>
    <vol-box :model.sync="model"
             :padding="30"
             title="修改密码"
             :width="450"
             :height="200">
      <Alert type="info">
        <h3>
          <span>帐号：{{row.UserName}}</span>
          <span>用户：{{row.UserTrueName}}</span>
        </h3>
      </Alert>
      <div>
        <Input placeholder="请输入密码"
               v-model="password"
               size="large"
               style="  width: 100%;margin-top: 15px;">
        <Icon type="ios-lock"
              slot="prefix" />
        </Input>
      </div>
      <div slot="footer">
        <Button type="info"
                size="large"
                icon="md-checkmark-circle"
                @click="savePwd()">修改密码</Button>
        <Button type="info"
                size="large"
                icon="md-close"
                @click="()=>{this.model=false}">关闭</Button>
      </div>
    </vol-box>

    <Drawer title="设置角色"
            :closable="false"
            width="450"
            v-model="drawer.model"
            v-if="drawer.inited">
      <h3 class="item">帐号：{{drawer.row.UserName}}</h3>
      <h3 class="item">选择角色</h3>
      <div class="item role-list">

        <el-tree :data="drawer.role.list"
                 :props="defaultProps"
                 :expand-on-click-node="false"
                 default-expand-all>
          <div class="action-group"
               slot-scope="{ node, data }">
            <!-- <div class="action-text"
                 :style="{width:((4-data.lv)*18+150)+'px'}"></div> -->
            <div class="action-text"> {{ data.label }}</div>
            <div class="action-item">
              <el-checkbox v-model="data.checked"></el-checkbox>
            </div>
          </div>
        </el-tree>

        <!-- <el-tree :data="drawer.role.list"
                 node-key="id"
                 default-expand-all>
          <div class="action-group"
               slot-scope="{ node, data }">
            <div class="action-text">{{ data.label }}</div>
            <div class="action-item">
              <el-checkbox></el-checkbox>
            </div>
          </div>
        </el-tree> -->
        <!-- <Tree :data="this.drawer.role.list"></Tree> -->
        <!-- <CheckboxGroup v-model="drawer.role.checked">
          <Checkbox v-for="(item,index) in drawer.role.list"
                    :key="index"
                    :label="item.id">{{item.roleName}}</Checkbox>
        </CheckboxGroup> -->
      </div>
      <div>
        <Button type="primary"
                @click="saveRole">保存</Button>
      </div>
    </Drawer>
  </div>
</template>
<script>
export default {
  components: {
    VolBox: () => import("@/components/basic/VolBox.vue"),
  },
  data () {
    return {
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      row: {},
      password: "",
      model: false,
      drawer: {
        source: [],
        role: {
          list: [],
          checked: {}
        },
        row: {},
        model: false,
        inited: false
      }
    };
  },
  // computed: {
  methods: {
    open (row) {
      this.password = "";
      this.row = row;
      this.model = true;
    },
    openRoleDrawer (row) {
      if (!this.drawer.inited) {
        this.getRoles();
      }

      this.drawer.inited = true;
      this.drawer.row = row;
      this.getUserRoles();
      this.drawer.model = true;

    },
    getRoles () {
      //获取系统所有的角色
      this.http.post("/api/User/getRoles").then(result => {
        var checkObj = {};
        result.forEach(element => {
          element.checked = false;
          //   checkObj[element.id] = false;
          // this.drawer.role.checked.push({ id: element.id, element: false })
        });
        this.source = result;
        this.drawer.role.checked = checkObj;
        this.drawer.role.list = this.base.convertTree(result, (node, data, isRoot) => {
          node.label = node.roleName;
        })
      })

    },
    getUserRoles () {//获取当前选择行用户的角色id
      var _checkedObj = this.drawer.role.checked;
      this.http.post("/api/User/getUserRoles?userId=" + this.drawer.row.User_Id, {}, true).then(result => {
        this.source.forEach(x => {
          x.checked = result.indexOf(x.id) != -1;
        })
      })
    },
    saveRole () {
      var checkedIds = this.source.filter(x => { return x.checked }).map(x => { return x.id });
      var _url = "/api/User/saveRole?userId=" + this.drawer.row.User_Id
      this.http.post(_url, checkedIds, "正在保存...").then(x => {
        this.$Message[x.status ? 'info' : 'error'](x.message);
      })
    },
    savePwd () {
      if (!this.password) return this.$Message.error("请输密码");
      if (this.password.length < 6)
        return this.$Message.error("密码长度至少6位");
      let url =
        "/api/user/modifyUserPwd?password=" +
        this.password +
        "&userName=" +
        this.row.UserName;
      this.http.post(url, {}, true).then((x) => {
        if (!x.status) {
          return this.$message.error(x.message);
        }
        this.model = false;
        this.$Message.success(x.message);
      });
    },
  },
  created () { },
};
</script>
<style lang="less" scoped>
.item {
  margin-bottom: 14px;
  label {
    width: 130px;
    margin-bottom: 10px;
  }
}
h3 {
  font-weight: 500;
  > span:last-child {
    margin-left: 30px;
  }
}
.role-list {
  border: 1px solid #c3c3c3;
  margin-bottom: 14px;
  border-radius: 5px;
  padding: 9px 7px;
}
.action-group {
  width: 100%;
  display: flex;
  padding-top: 12px;
  font-size: 14px;

  .action-text {
    flex: 1;
  }
  .action-item {
    width: 32px;
  }
}
</style>
<style scoped>
.role-list >>> .el-tree-node__content {
  height: 35px;
}
</style>